<template>
  <div class="login-app">
    <!-- 模糊div + 背景图片 -->
    <div class="filter-div"></div>

    <!-- 登录表单 -->
    <div class="login-from">
      <h2>外卖管理系统管理员登录</h2>

      <el-form :model="loginForm" ref="loginForm" :rules="rules">
        <!--1. prefix-icon="xxxxxx"   输入框前面小图标 -->
        <!--2. clearable   清空输入框信息 -->
        <!--3. show-password  密码框小眼睛 -->
        <!--4. :rules="rules"  表单的验证规则要用到  prop="xxx"要对应验证规则-->
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.account"
            autocomplete="off"
            placeholder="请输入账号"
            prefix-icon="el-icon-user-solid"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            autocomplete="off"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            clearable
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { checkLogin } from "@/api/user";
import axios from "@/utils/request";
export default {
  data() {
    return {
      //表单的数据
      loginForm: {
        account: "",
        password: "",
      },
      //表单验证规则
      rules: {
        //账号的
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur", //失去焦点触发
          },
        ],
        //密码的
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur", //失去焦点触发
          },
        ],
      },
    };
  },

  methods: {
    //方法
    submitForm() {
      //触发验证表单
      this.$refs.loginForm.validate(async (valid) => {
        //validate()  elm自带的验证方法
        //点击提交按钮  找到表单  用validate()方法  表单都有值就是true
        if (valid) {
          // console.log(this.loginForm);  //打印表单信息
          let res = await checkLogin(this.loginForm);
          //验证通过
          // console.log(res);
          let { code, msg, token, role } = res; //对象解构
          //把taken存入本地存储
          // console.log(taken);
          localStorage.setItem("t_k",token)
          if (code === 0) {
            //成功
            this.$message({
              message: msg,
              type: "success",
            });
            //登陆成功跳转
            this.$router.push("/");
          } else {
            //验证失败
            // console.log("验证失败");

            this.$message.error(msg);
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-app {
  width: 100%;
  height: 100%;

  .filter-div {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url("../../assets/imgs/login-bg.jpg") no-repeat center/cover;
    filter: blur(5px);
  }

  .login-from {
    position: fixed;
    top: 50%;
    right: 30%;
    transform: translateY(-50%);
    width: 350px;
    background-color: rgba(255, 255, 255, 0.376);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    padding: 20px;
    h2 {
      font-weight: normal;
      text-align: center;
      color: #79b9fa;
      margin-bottom: 20px;
      font-size: 16px;
    }

    .el-button {
      width: 100%;
      background-color: rgb(26, 147, 228);
      &:hover{
        
        box-shadow: 0px 0px 5px 0px #4dffca;
      }
    }
  }
}
</style>